<template>
  <div class="overtimeContainer">
    <!-- 加班申请 -->
    <div class="left">
      <h1>申请{{ info.processName }}</h1>
      <div class="leftTop">
        <img src="@/assets/common/img.jpeg" alt="">
        <div class="info">
          <p>
            <strong>{{ info.username }}</strong>
          </p>
          <p>
            <span>部门 : {{ info.departmentName }}</span>
          </p>
          <p>
            <span>入职时间 : {{ info.timeOfEntry |formatDate }}</span>
          </p>
        </div>
      </div>
      <div class="leftBottom">
        <p>
          <span>补偿方式: |</span>
          调休
        </p>
        <p>
          <span>加班开始时间: |</span>
          {{ info.data.start_time|formatDate }}
        </p>
        <p>
          <span>加班结束时间: |</span>
          {{ info.data.end_time| formatDate }}
        </p>
        <p>
          <span>申请原因: |</span>
          {{ info.data.reason }}
        </p>
      </div>
    </div>
    <div class="right">
      <div class="rightTop">
        <strong> 审批记录</strong>
      </div>
      <div class="rightBottom">
        <li v-for="(value,index) in taskInstance" :key="index">
          <div class="time">
            <p>{{ value.handleTime|formatDate }}</p>
          </div>
          <div class="name" :style="index==taskInstance.length-1?'border-left:none':''">
            <strong>{{ value.handleUserName }}</strong>
          </div>
          <div class="action">
            <span v-if="index==0">发起申请</span>
            <span v-else-if="value.handleType == '1'">未开始</span>
            <span v-else-if="value.handleType == '2'">审批通过</span>
            <span v-else-if="value.handleType == '3'">审批驳回</span>
            <span v-else-if="value.handleType == '4'">已撤销</span>
            <span v-else>审批中</span>
          </div>
        </li>

      </div>

    </div>
  </div>
</template>

<script>
import { getApprovalsDetail, getApprovalsTaskDetail } from '@/api/approvals'
export default {
  data() {
    return {
      // 获取当前审批单员工id
      processId: this.$route.params.id,
      // 发起申请的员工信息
      info: {
        data: {}
      },
      // 审批流程
      taskInstance: []
    }
  },
  mounted() {
    // 获取审批单详情
    this.getApprovalsDetail()
    // 获取流程详情数据
    this.getApprovalsTaskDetail()
  },
  methods: {
    // 获取审批单详情数据
    async getApprovalsDetail() {
      this.info = await getApprovalsDetail(this.processId)
      this.info.data = JSON.parse(this.info.procData)
    },
    // 获取审批流程的详情数据
    async getApprovalsTaskDetail() {
      this.taskInstance = await getApprovalsTaskDetail(this.processId)
    }
  }
}
</script>

<style lang="scss" scoped>
.overtimeContainer{
  display: flex;
  justify-content:space-between;
  padding: 20px;
  .left{
    flex: 4;
   img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    }
    .leftTop{
      display: flex;
      justify-content: start;
      border-bottom:1px solid #ccc
    }
    .leftBottom{
      margin-top: 40px;
      line-height:30px;
      margin-left: 150px;
      span{
        color:#999;
        margin:25px 0
      }
    }
  }
  .right{
    flex: 1;
    list-style: none;
    .rightTop{
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
      line-height:40px;
    }
    .rightBottom{
      display: flex;
      flex-direction: column;
      padding-top: 20px;
      li{
        height: 70px;
        display: flex;
        justify-content: space-around;
        .name{
          position: relative;
          border-left: 1px solid #ccc;
          padding-left: 10px;
          width: 80px;
        }
        .action{
          width:80px
        }
        strong::after{
          content: " ";
          border-radius: 50%;
          position: absolute;
          width: 10px;
          height: 10px;
          border: solid 2px #44b549;
          left: -6px;
          top: 0px;
          background: #fff;
        }

      }
    }
  }

}
</style>
